<template>
	<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
	        <view class="tabbar-item"
	            v-for="(item, index) in list" 
	            :key="index" 
	            @click="tabbarChange(item.path)"
	        >
	            <image class="item-img" :src="item.icon_a" v-if="current == index"></image>
	            <image class="item-img" :src="item.icon" v-else></image>
	            <view class="item-name" :class="{'tabbarActive': current == index}" v-if="item.text">{{item.text}}</view>
	        </view>
	    </view>
</template>

<script>
	export default {
		props: {
		        current: 0
		    },
		name:"tabBar",
		data() {
			return {
				 paddingBottomHeight: 0,  //苹果X以上手机底部适配高度
				list: [{
						text: '首页',  
						icon: '/static/images/indexNavIcon.png',  //未选中图标
						icon_a: '/static/images/indexNavIcon1.png',  //选中图片
						path: "index",  //页面路径
					},{
						text: '预定',
						icon: '/static/images/yudingNavicon.png',
						icon_a: '/static/images/yudingNavicon1.png',
						path: "reservation",
					}
					,{
						text: '订单',
						icon: '/static/images/mallNavIcon.png',
						icon_a: '/static/images/mallNavIcon1.png',
						path: 'indexMall',
					},
					{
						text: '评鉴',
						icon: '/static/images/EvaNavIcon.png',
						icon_a: '/static/images/EvaNavIcon1.png',
						path: "indexPro",
					},
					{
						text: '我的',
						icon: '/static/images/userNomal.png',
						icon_a: '/static/images/useNavIcon.png',
						path: "center",
					},
				]
			};
		},
		 created() {
		        let that = this;
		        uni.getSystemInfo({
		            success: function (res) {
		                let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
		                model.forEach(item => {
		                    //适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
		                    if(res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
		                        that.paddingBottomHeight = 40;
		                    }
		                })
		            }
		        });
		    },
		 methods: {
		        tabbarChange(path) {
					console.log('%%%',path)
		            uni.switchTab({
		                url: path
		            })
		        }
		    }	
	}
</script>

<style lang="scss" scoped>
   .tabbarActive{
           color: #79D5AD !important;
       }
       .tabbar{
		   z-index: 33333;
           position: fixed;
           bottom: 0;
           left: 0;
           right: 0;
           display: flex;
           justify-content: space-around;
           align-items: center;
           width: 100%;
           height: 100rpx;
                   background-color: #ffffff;
           .tabbar-item{
               display: flex;
               flex-direction: column;
               align-items: center;
               justify-content: center;
               height: 100rpx;
               .item-img{
                   margin-bottom: 4rpx;
                   width: 46rpx;
                   height: 46rpx;
               }
               .item-name{
                   font-size: 26rpx;
                   color: #A3A3A3;
               }
           }
       }
</style>
